<template>
  <!-- 自定义样式 -->
  <van-config-provider :theme-vars="themeVars">
    <div class="det">
      <!-- 头部导航 -->
      <div class="bar">
        <van-nav-bar fixed placeholder @click-left="back">
          <template #left>
            <div class="bar_left">
              <div>
                <van-icon
                  class="i"
                  name="arrow-left"
                  size="25"
                  color="#aaa"
                ></van-icon>
              </div>
              <div @click.stop="pre">
                <van-image :src="note.avatar" round width="30"></van-image>
              </div>
              <div>{{ note.name }}</div>
            </div>
          </template>
          <template #right>
            <div class="bar_right">
              <div>
                <van-button
                  plain
                  color="red"
                  :hairline="true"
                  round
                  size="mini"
                >
                  <span class="btn">关注</span>
                </van-button>
              </div>
              <van-icon
                name="share-o"
                size="20"
                color="#555"
                @click="fx"
              ></van-icon>
            </div>
          </template>
        </van-nav-bar>
      </div>
      <!-- 轮播图 -->
      <div class="img">
        <van-swipe :loop="false" lazy-load>
          <van-swipe-item v-for="(item, i) in note.url" :key="i">
            <van-image
              :src="item"
              height="400"
              fit="cover"
              position="top right"
            ></van-image>
          </van-swipe-item>
          <template #indicator="{ active, total }">
            <!-- 页数 -->
            <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
            <!-- 圆点 -->
            <ul class="dot">
              <li
                v-for="(el, i) in total"
                :key="i"
                :class="active + 1 == el ? 'active' : ''"
              ></li>
            </ul>
          </template>
        </van-swipe>
      </div>
      <!-- 笔记内容 -->
      <div class="text">
        <p class="title">{{ note.title }}</p>
        <p class="cont">
          {{ note.content }}
        </p>
      </div>
      <!-- 评论 -->
      <div class="comments">
        <div
          class="speak"
          :style="comments.length == 0 ? 'margin-bottom: 200px;' : ''"
        >
          <span class="number">共{{ comments.length }}条评论</span>
          <div class="input">
            <van-image :src="avatar" round width="35"></van-image>
            <input
              type="text"
              @keyup="speakValue"
              @keydown.enter="fa"
              :value="speak"
              placeholder="说点什么把说不定就火了呢"
            />
          </div>
          <!-- 固定在低端的发布评论 -->
          <div class="fa">
            <div class="input">
              <van-icon name="edit" class="ico" size="15"></van-icon>
              <input
                type="text"
                @keyup="speakValue"
                :value="speak"
                placeholder="说点什么吧..."
              />
            </div>
            <div class="icon">
              <van-icon name="like-o" color="red" size="30"></van-icon>
              <van-icon
                name="guide-o"
                color="black"
                @click="fa"
                size="30"
              ></van-icon>
            </div>
          </div>
        </div>
        <div class="comment" v-for="item in comments" :key="item">
          <div class="left">
            <van-image :src="item.avatar" round width="35"></van-image>
          </div>
          <div class="right">
            <div class="name">{{ item.name }}</div>
            <div class="cont">
              {{ item.comment }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 隐藏的发布提示 -->
    <van-share-sheet v-model:show="show" title="分享至" :options="options">
    </van-share-sheet>
  </van-config-provider>
</template>

<script>
import {
  NavBar,
  Image,
  ConfigProvider,
  Button,
  ShareSheet,
  Swipe,
  SwipeItem,
} from "vant";
import { ref, reactive, inject } from "vue";
import { useRoute, useRouter } from "vue-router";
import store from "@/store";
import { Toast } from "vant";
import { com } from "@/api/comment";
export default {
  name: "Detail",
  components: {
    [NavBar.name]: NavBar,
    [Image.name]: Image,
    [ConfigProvider.name]: ConfigProvider,
    [Button.name]: Button,
    [ShareSheet.name]: ShareSheet,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  setup() {
    const axios = inject("$http");
    const log = Toast;
    // 自定义组件样式
    const themeVars = {
      navBarHeight: "55px",
    };
    // 分享面板
    let show = ref(false);
    const options = [
      [
        { name: "微信", icon: "wechat" },
        { name: "朋友圈", icon: "wechat-moments" },
        { name: "微博", icon: "weibo" },
        { name: "QQ", icon: "qq" },
      ],
      [
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
        { name: "小程序码", icon: "weapp-qrcode" },
      ],
    ];
    function fx() {
      show.value = !show.value;
    }
    // 轮播
    let arr = ["1.jpg", "2.jpg", "1.jpg"];

    // 数据详情
    let route = useRoute();
    let data = JSON.parse(route.params.msg);
    function item() {
      let {
        title,
        avatar,
        comment_num,
        content,
        name,
        support_num,
        time,
        url,
      } = data.item;
      let item = {
        title,
        avatar,
        comment_num,
        content,
        name,
        support_num,
        time,
        url,
      };
      return item;
    }
    let note = reactive(item());
    // 笔记评论内容
    let comments = ref(data.data);
    // 评论头像
    let avatar = store.state.user.avatar;
    // 发布评论
    let speak = ref("");

    function speakValue(e) {
      speak.value = e.target.value;
    }
    function cx(){
      axios({
          url: "http://127.0.0.1:8081/com",
          method: "post",
          data: { id: data.item.id },
        }).then(msg=>{
          if(msg.data.data instanceof Array){
            comments.value = msg.data.data.reverse ()
          }
        })
    }

    async function fa() {
      speak.value = speak.value.trim();
      if (speak.value !== "") {
        await com(axios, store.state.user.id, data.item.id, speak.value, log,cx);
        speak.value = "";
      } else {
        log("不能输入空字符串");
      }
    }

    // 将此页面的数据暂存在状态管理
    store.commit("detail", data);
    // 标题 返回
    function back() {
      // 通过路由传递过来的参数判断返回那个页面
      if (data.num == 1) {
        router.push("/");
      } else if (data.num == 2) {
        pre();
      } else if (data.num == 3) {
        router.push("/my");
      } else {
        router.push("/");
      }
    }

    // 点击头像跳转到他人页面
    const router = useRouter();
    function pre(event, id = data.item.user_id) {
      // 判断当前笔记 如果是自己的就跳转到我的页面
      console.log(id);
      if (store.state.user.id != id) {
        axios({
          url: "http://127.0.0.1:8081/my",
          method: "post",
          data: { id },
        })
          .then((msg) => {
            let data = JSON.stringify(msg.data.data);
            router.push({ name: "Person", params: { data } });
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        router.push("/my");
      }
      // router.push("/person")
    }

    return {
      themeVars,
      options,
      show,
      fx,
      arr,
      back,
      note,
      comments,
      pre,
      avatar,
      speak,
      speakValue,
      fa,
    };
  },
};
</script>

<style scoped lang="scss">
.det {
  width: 100vw;
  // 顶部
  .bar {
    width: 100%;
    .bar_left {
      display: flex;
      align-items: center;
      div {
        margin-right: 5px;
      }
    }
    .bar_right {
      display: flex;
      align-items: center;
      .btn {
        margin: 8px;
      }
      div {
        margin-right: 10px;
      }
    }
  }
  // 轮播图
  .img {
    width: 100%;
    // height: 300px;
    .custom-indicator {
      color: #fff;
      border-radius: 45%;
      position: absolute;
      right: 5px;
      top: 10px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(82, 80, 80, 0.9);
    }

    .dot {
      padding: 2%;
      width: 100%;
      display: flex;
      justify-content: center;
      li {
        width: 7px;
        height: 7px;
        margin-left: 3px;
        border-radius: 50%;
        background: #ccc;
      }

      .active {
        background: red;
      }
    }
  }
  // 标题
  .text {
    width: 100%;
    padding: 4%;
    border-bottom: 1px solid #ddd;
    .title {
      font-size: 18px;
    }
    .cont {
      font-size: 15px;
    }
  }
  // 评论
  .comments {
    padding: 3% 3%;
    width: 100%;
    // height: 300px;
    & .comment:last-child {
      margin-bottom: 18px;
    }
    .comment {
      width: 100%;
      padding: 2% 0;
      display: flex;
      align-items: center;
      .right {
        margin-left: 2%;
        padding-bottom: 2%;
        flex: 1;
        border-bottom: 1px solid #ddd;
        .name {
          color: #999;
          font-size: 15px;
        }
        .cont {
          font-size: 15px;
        }
      }
    }
    .speak {
      width: 100%;
      padding: 2% 0;

      // border-bottom: 1px solid #aaa;
      .input {
        width: 100%;
        padding: 2% 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
        input {
          width: 80%;
          height: 25px;
          padding: 2% 5%;
          outline: none;
          border: none;
          background: #eee;
          border-radius: 15px;
        }
      }
      .fa {
        width: 100%;
        padding: 3% 0%;
        background: #fff;
        z-index: 99;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        justify-content: space-between;
        .input {
          width: 70%;
          padding: 0 4%;
          position: relative;
          display: block;
          .ico {
            position: absolute;
            top: 6px;
            left: 40px;
          }
          input {
            width: 100%;
            height: 30px;
            padding: 0 18%;
          }
        }
        .icon {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
        }
      }
    }
  }
}
</style>